<template>
  <div>
    <a-drawer
        v-model:visible="globalStore.isShowPersonalCenter"
        class="personal-center"
        title="个人资料"
        placement="right"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="用户名">
          <a-input disabled v-model:value="modelRef.username"/>
        </a-form-item>
        <a-form-item label="用户密码" v-bind="validateInfos.password">
          <a-input v-model:value="modelRef.password"/>
        </a-form-item>
        <a-form-item label="用户头像">
          <a-upload
              :disabled="isUploading"
              v-model:file-list="avatarList"
              name="file"
              :data="uploadParams"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="UPLOAD_FILE_PATH"
              :before-upload="beforeUpload"
              @change="handleUploadChange"
          >
            <img class="avatar-img" v-if="avatarUrl" :src="avatarUrl" alt="avatar"/>
            <div v-else>
              <template v-if="isUploading">
                <loading-outlined></loading-outlined>
                <div class="ant-upload-text">上传中...</div>
              </template>
              <template v-else>
                <plus-outlined></plus-outlined>
                <div class="ant-upload-text">点击上传</div>
              </template>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="用户等级">
          <a-select disabled :value="modelRef.permission">
            <a-select-option :value="1">1级</a-select-option>
            <a-select-option :value="2">2级</a-select-option>
            <a-select-option :value="3">3级</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="handleResetForm">重置</a-button>
          <a-button style="margin-left: 10px" type="primary" @click.prevent="onSubmit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import {ref, toRaw} from "vue";
import {useForm} from "ant-design-vue/es/form";
import {LoadingOutlined, PlusOutlined} from '@ant-design/icons-vue';

import {modelRef, rulesRef, uploadParams} from "./config";
import useGlobalStore from "../../store/globalModule";
import useAdminStore from "../../store/adminModule";
import {PROXY_FRONT_URL, UPLOAD_FILE_PATH} from '@/constants/data'

// 初始化变量
const globalStore = useGlobalStore()
const adminStore = useAdminStore()

// 表单hook
const {validate, validateInfos} = useForm(modelRef, rulesRef);

// 上传相关
const isUploading = ref(true)
const avatarUrl = ref("")
const avatarList = ref([])

adminStore.$onAction((changeInfo) => {
  if (changeInfo.name === "requestAdminDetailAction") {
    changeInfo.after(() => {
      avatarUrl.value = adminStore.currentAdminDetail.avatar_url
      modelRef.username = adminStore.currentAdminDetail.username
      modelRef.password = adminStore.currentAdminDetail.password
      modelRef.permission = adminStore.currentAdminDetail.permission
      isUploading.value = false
    })
  }
}, true)

const onSubmit = () => {
  validate()
      .then(async () => {
        const needChangeParams = {
          "password": modelRef.password
        }
        const flag = await adminStore.updateAdminSelfAction(needChangeParams)
        if (flag) {
          globalStore.setPersonalCenterAction(false)
        }
      })
      .catch(err => {
        console.log('error', err);
      });
};

// 为了有加载中的效果
const beforeUpload = () => {
  avatarUrl.value = ""
  isUploading.value = true
}

// 上传时的钩子
const handleUploadChange = (uploadInfo: any) => {
  const {file} = uploadInfo
  const status = file.status
  if (status === "done") {
    avatarUrl.value = PROXY_FRONT_URL + file.response.data.url
  }
  // 去除加载中效果
  if (status === "done" || status === "error") {
    isUploading.value = false
  }
}

const handleResetForm = () => {
  modelRef.password = "****"
}
</script>

<style lang="less" scoped>
.personal-center {
  .avatar-uploader {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
